import 'package:flutter/material.dart';
import 'package:kxy_flutter_app/components/loading_widget.dart';
import 'package:kxy_flutter_app/model/exam_category.dart';
import 'package:kxy_flutter_app/r.dart';
import 'package:kxy_flutter_app/view/my/rank/exam_picker_widget.dart';
import 'package:kxy_flutter_app/view/my/rank/exam_rank_list_widget.dart';
import 'package:kxy_flutter_app/view/my/rank/my_rank_widget.dart';
import 'package:provider/provider.dart';

import 'view_model/exam_rank_model.dart';

class ExamRankView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ExamRankViewState();
  }
}

class ExamRankViewState extends State<ExamRankView> with TickerProviderStateMixin {
  Future loadFuture;
  TabController controller;
  ExamRankModel rankModel;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (rankModel == null) {
      rankModel = Provider.of<ExamRankModel>(context, listen: false);
      loadFuture = rankModel.init().then((value) {
        controller = new TabController(
          length: rankModel.cateList.length,
          vsync: this,
        );
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return backgroundWidget(
      Scaffold(
        appBar: appbar(),
        backgroundColor: Colors.transparent,
        body: FutureBuilder(
          future: loadFuture,
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              return body();
            }
            return LoadingWidget();
          },
        ),
      ),
    );
  }

  Widget body() {
    List<ExamRankListWidget> children = new List<ExamRankListWidget>();
    var cateList = rankModel.cateList;
    for (var i = 0; i < cateList.length; i++) {
      children.add(ExamRankListWidget(cateIndex: i));
    }

    return Column(
      children: [
        MyRankWidget(),
        tabbar(rankModel.cateList),
        Expanded(
          child: TabBarView(
            controller: controller,
            children: children,
          ),
        ),
      ],
    );
  }

  Widget tabbar(List<ExamCategory> cateList) {
    return PreferredSize(
      preferredSize: Size(MediaQuery.of(context).size.width, 42),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
            bottom: BorderSide(
              color: Colors.black12,
              width: 0.5,
            ),
          ),
        ),
        alignment: Alignment.centerLeft,
        child: TabBar(
          isScrollable: true,
          tabs: cateList.map((e) => Text(e.name)).toList(),
          controller: controller,
          labelPadding: EdgeInsets.fromLTRB(15, 15, 15, 10),
          unselectedLabelColor: Colors.black54,
          unselectedLabelStyle: TextStyle(fontWeight: FontWeight.normal, fontSize: 16),
          labelColor: Theme.of(context).primaryColor,
          labelStyle: TextStyle(fontWeight: FontWeight.normal, fontSize: 16),
          indicatorSize: TabBarIndicatorSize.label,
          indicatorColor: Theme.of(context).primaryColor,
        ),
      ),
    );
  }

  Widget appbar() {
    return AppBar(
      title: Text('考试排行', style: TextStyle(color: Colors.white)),
      backgroundColor: Colors.transparent,
      elevation: 0,
      leading: IconButton(
        icon: Icon(Icons.arrow_back, color: Colors.white),
        onPressed: () => Navigator.pop(context),
      ),
      actions: [
        ExamPickerWidget(getCateIndex: () => controller.index),
      ],
    );
  }

  Widget backgroundWidget(Widget child) {
    var img = DecorationImage(
      image: AssetImage(R.assetsCommonBg),
      fit: BoxFit.fill,
      alignment: Alignment.topCenter,
    );

    var shadow = BoxShadow(
      color: Color.fromRGBO(0, 0, 0, 0.5),
      blurRadius: 5,
      offset: Offset(0, 1),
    );

    return Container(
      decoration: BoxDecoration(color: Colors.white),
      child: Stack(
        children: [
          Container(
            height: 90 + kToolbarHeight + MediaQuery.of(context).padding.top,
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [shadow],
              image: img,
            ),
          ),
          child,
        ],
      ),
    );
  }
}
